<template>
  <div>
    <Table :columns="columns" :data="row.children" border>
      <!-- eslint-disable-next-line -->
      <template slot="icon" slot-scope="{ row }">
        <Icon :type="row.icon" style="font-size: 20px" />
      </template>
      <!-- eslint-disable-next-line -->
      <template slot="action" slot-scope="{ row }">
        <Button
          v-if="row.type === 'SUB_FOLDER'"
          type="info"
          size="small"
          @click="addBtnClick(row)"
        >
          添加
        </Button>
        <Button type="primary" size="small" @click="modifyBtnClick(row)">
          修改
        </Button>
        <Button type="error" size="small" @click="removeBtnClick(row)">
          删除
        </Button>
      </template>
    </Table>
  </div>
</template>

<script>
import WSubFileCell from '@/components/admin/auth/page/subFileCell'
export default {
  name: 'ComAdminAuthPageSubCell',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    WSubFileCell
  },
  props: {
    row: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(WSubFileCell, {
              props: {
                row: params.row
              },
              on: {
                modify: (row) => {
                  this.modifyBtnClick(row)
                },
                remove: (row) => {
                  this.removeBtnClick(row)
                }
              }
            })
          }
        },
        {
          title: '标题',
          key: 'title',
          width: 200
        },
        {
          title: '图标',
          width: 70,
          slot: 'icon'
        },
        {
          title: '索引',
          key: 'index',
          width: 70
        },
        {
          title: '描述',
          key: 'describe'
        },
        {
          title: '操作',
          slot: 'action',
          width: 170,
          align: 'center'
        }
      ]
    }
  },
  methods: {
    addBtnClick (row) {
      this.$emit('add', row)
    },
    modifyBtnClick (row) {
      this.$emit('modify', row)
    },
    removeBtnClick (row) {
      this.$emit('remove', row)
    }
  }
}
</script>

<style scoped></style>
